feat: add node constellation - #13
Merged
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
Adds a post-MVP “Node Constellation” dashboard mode: a read-only, accessible, force-directed visualization of the node hierarchy that shares the existing period filter and “Show completed” behavior, while keeping constellation focus/viewport as ephemeral client state.
Changes:
- Introduces constellation graph utilities (rolled-up duration selection, bounded sqrt radius scaling, deterministic reduced-motion layout, and visible graph building).
- Adds the
NodeConstellationclient component (d3-force layout + pan/zoom/nudge controls + accessible node inspection card) and integrates it into the dashboard shell with a toolbar toggle. - Adds styling for the constellation view, plus unit and e2e coverage for scaling, visibility rules, accessibility interactions, and reduced-motion nudging.
Reviewed changes
Copilot reviewed 9 out of 10 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
SPEC.md |
Specifies Node Constellation as a post-MVP extension and clarifies ephemeral state expectations. |
package.json |
Adds d3-force dependency and @types/d3-force dev dependency for the new visualization. |
pnpm-lock.yaml |
Locks the new d3-force dependency set. |
src/lib/nodes/constellation.ts |
Adds graph/radius/layout helper functions used by the constellation UI. |
src/components/node-constellation.tsx |
Implements the interactive, accessible constellation view (layout, pan/zoom, selection card, reduced-motion behavior). |
src/components/icons.tsx |
Adds new icons used by constellation controls and dashboard toggle. |
src/components/dashboard-shell.tsx |
Integrates constellation mode into the dashboard shell and updates focus management for mode transitions. |
src/app/globals.css |
Adds constellation layout/styling and pressed styling for toggle icon buttons. |
tests/unit/node-constellation.test.ts |
Unit tests for radius scaling, deterministic reduced-motion positions, and graph visibility/rollups. |
tests/e2e/foundation.spec.ts |
E2E coverage for constellation navigation/accessibility + reduced-motion nudging behavior. |
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces the "Node Constellation" feature as a post-MVP extension, providing a read-only, interactive, and accessible graphical visualization of the node hierarchy in the dashboard. It also adds the necessary dependencies and UI state management for this feature, along with extensive styling updates to support the new view. The changes are grouped as follows:
Feature Specification and UI Integration:
SPEC.md, specifying the Node Constellation feature: a graphical, force-directed, read-only visualization of the node hierarchy, with accessible interaction, legend, and visual encodings for node state and duration.NodeConstellationcomponent and clarified that constellation mode, focus, and viewport placement are ephemeral client state. [1] [2]Dependency Management:
d3-force(and its types) topackage.jsonandpnpm-lock.yamlto support the force-directed graph layout used in Node Constellation. [1] [2] [3] [4] [5] [6] [7] [8]Styling and Layout:
.constellationview and its subcomponents, including layout, legend, node appearance, focus/hover states, and responsive adjustments for mobile and desktop. [1] [2] [3] [4]Dashboard Shell and State Management:
NodeConstellationcomponent into the dashboard shell, and added state to toggle constellation mode, manage focus transitions between tree/detail/constellation, and ensure ephemeral client state for constellation interactions. [1] [2] [3] [4] [5] [6] [7]These changes lay the groundwork for the Node Constellation feature, ensuring it is visually integrated, accessible, and well-specified, while maintaining clear separation from the core MVP and persistent application state.